import React, {Component} from "react";

// 引入子组件
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";

import "./index.css"


export default class App extends Component {

    state = {
        todoList: [
            {id: "001", name: '吃饭', done: false},
            {id: "002", name: '喝水', done: false},
            {id: "003", name: '睡觉', done: true},
        ]
    }

    // 添加todo
    add = (todo) => {
        this.setState({
            todoList: [todo, ...this.state.todoList]
        })
    }

    // 删除todo
    delete = (id) => {
        const {todoList} = this.state
        const newtodoList = todoList.filter((item) => {
            return item.id !== id
        })
        this.setState({
            todoList:newtodoList
        })
    }

    // 选择todo
    check = (id,value) => {
        const {todoList} = this.state
       todoList.forEach((item) => {
           if(item.id===id){
               item.done=value
           }
        })
        this.setState({
            todoList
        })

    }

    // 全选
    checkAll=(done)=>{
     const{todoList}=  this.state
        const newTodoList=todoList.map((item)=>{
            return {...item,done:done}
        })
        this.setState({
            todoList:newTodoList
        })
    }

    // 清除已完成
    clearAllDone=()=>{
        const{todoList}=  this.state
        const newTodoList=todoList.filter((item)=>{
            return item.done===false
        })
        this.setState({
            todoList:newTodoList
        })
    }

    render() {
        return (
            <div id="root">
                <div className="todo-container">
                    <div className="todo-wrap">
                        <Header add={this.add}/>
                        <List todoList={this.state.todoList} deleteTodo={this.delete} check={this.check}/>
                        <Footer todoList={this.state.todoList} checkAll={this.checkAll} clearDone={this.clearAllDone}/>
                    </div>
                </div>
            </div>
        )
    }
}